<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">来源</span>
            <AppSelect v-model="alarm_notice_data.app_id" style="width: 200px;margin-right: 10px;"></AppSelect>
            <span style="margin-right:5px;">通知类型</span>
            <Select v-model="alarm_notice_data.notice_type" placeholder="选择通知类型" style="width: 200px;margin-right: 10px;">
                <Option value="">全部</Option>
                <Option value="email">邮箱</Option>
                <Option value="sms">短信</Option>
                <Option value="dingtalk">钉钉</Option>
                <Option value="weixin">微信</Option>
            </Select>
            <Button type="primary" @click="handleAlarmNoticesSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearAlarmNoticesSearch">重置</Button>
        </div>
        <Table :columns="alarm_notice_data.columns" :data="alarm_notice_data.data" border stripe>
            <template #app_id="{ row }">
                <AppTableCellValue :app_id="row.app_id"></AppTableCellValue>
            </template>
            <template #notice_type="{ row }">
                <Tag v-if="row.notice_type == 'email'" color="blue">邮箱</Tag>
                <Tag v-if="row.notice_type == 'sms'" color="green">短信</Tag>
                <Tag v-if="row.notice_type == 'dingtalk'" color="yellow">钉钉</Tag>
                <Tag v-if="row.notice_type == 'weixin'" color="cyan">微信</Tag>
            </template>
            <template #notice_content="{ row }">
                {{ truncateString(row.notice_content) }}
            </template>
            <template #notice_status="{ row }">
                <Tag v-if="row.notice_sent == 1" color="green">已发送</Tag>
                <Tag v-else-if="row.notice_sent == 2" color="red">发送失败</Tag>
                <span v-else>未发送</span>
            </template>
            <template #action="{ row }">
                <AlarmNoticeDetialButton :data="row"></AlarmNoticeDetialButton>
            </template>
        </Table>
        <Page :total="alarm_notice_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleAlarmNoticesPageChange" @on-page-size-change="handleAlarmNoticesPageSizeChange" />
    </div>
</template>

<script>
import AppSelect from './AppSelect.vue';
import AppTableCellValue from './AppTableCellValue.vue';
import AlarmNoticeDetialButton from './AlarmNoticeDetialButton.vue';
import { truncateString } from '@/utils/index.js';

export default {
    name: 'AlarmNoticesView',
    components: {
        AppSelect,
        AppTableCellValue,
        AlarmNoticeDetialButton
    },
    data() {
        return {
            alarm_notice_data: {
                app_id: '',
                notice_type: '',
                notice_content: '',
                columns: [
                    { title: 'ID', key: 'notice_id', width: 100, align: 'center' },
                    { title: '应用ID', slot: 'app_id', width: 200, align: 'center' },
                    { title: '通知类型', slot: 'notice_type', width: 100, align: 'center' },
                    { title: '通知内容', slot: 'notice_content' },
                    { title: '通知目标', key: 'notice_target', maxWidth: 300 },
                    { title: '通知生成时间', key: 'notice_time', width: 200, align: 'center' },
                    { title: '通知状态', slot: 'notice_status', width: 120, align: 'center' },
                    { title: '操作', slot: 'action', width: 100, align: 'center' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        }
    },
    methods: {
        handleAlarmNoticesSearch() {
            this.alarm_notice_data.page_current = 1;
            this.handleGetAlarmNotices();
        },
        handleClearAlarmNoticesSearch() {
            this.alarm_notice_data.app_id = '';
            this.alarm_notice_data.notice_type = '';
            this.alarm_notice_data.notice_content = '';
            this.alarm_notice_data.page_current = 1;
            this.handleGetAlarmNotices();
        },
        handleAlarmNoticesPageChange(page_current) {
            this.alarm_notice_data.page_current = page_current;
            this.handleGetAlarmNotices();
        },
        handleAlarmNoticesPageSizeChange(page_size) {
            this.alarm_notice_data.page_size = page_size;
            this.alarm_notice_data.page_current = 1;
            this.handleGetAlarmNotices();
        },
        handleGetAlarmNotices() {
            var url = '/get_alarm_notices?page_size=' + this.alarm_notice_data.page_size + '&page_current=' + this.alarm_notice_data.page_current;
            if (this.alarm_notice_data.app_id) {
                url += '&app_id=' + encodeURIComponent(this.alarm_notice_data.app_id);
            }
            if (this.alarm_notice_data.notice_type) {
                url += '&notice_type=' + encodeURIComponent(this.alarm_notice_data.notice_type);
            }
            if (this.alarm_notice_data.notice_content) {
                url += '&notice_content=' + encodeURIComponent(this.alarm_notice_data.notice_content);
            }
            this.$http.get(url).then(res => {
                this.alarm_notice_data.page_total = res.page_total;
                this.alarm_notice_data.data = res.data;
            });
        },
        truncateString(content) {
            return truncateString(content);
        }

    },
    created() {
        this.handleGetAlarmNotices();
    }
}
</script>